<template>
    <section class="modifyPassword" v-loading="loading">
        <h3 class="main-title1">修改密码</h3>
        <div class="myCenter-main">
            <div class="data-main">
                <div class="back-box">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="手机号:" prop="phone">
                            <el-input v-model="ruleForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="code">
                            <el-input v-model="ruleForm.code" class="code-input"></el-input>
                            <div class="getCode" v-show="show" @click="getCode">获取验证码</div>
                            <div class="getCode" v-show="!show">{{countMes}}</div>
                        </el-form-item>
                        <el-form-item label="用户密码:" prop="password">
                            <el-input v-model="ruleForm.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码:" prop="password1">
                            <el-input v-model="ruleForm.password1" type="password"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="back-button" @click="submitForm('ruleForm')">修改密码</div>
                </div>
            </div>
        </div>
      
    </section>
</template>

<script>

import $ from 'jquery'
import { Notification } from 'element-ui';
export default {
  components: {
  },
  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else {
        if (this.ruleForm.password1 !== this.ruleForm.password) {
          callback(new Error('两次输入的密码不一致'));
        }
        else{
          callback();
        }
        
      }
    };
    return{
      loading:false,
      muluList1:[],
      pageNo:1,
      activeName:'first',
      total:null,
      content:{},
      ruleForm:{
          phone:'',
          password:'',
          password1:'',
          code:'',
      },
      rules: {
          phone: [
              { required: true, message: '请输入手机号', trigger: 'blur' }
          ],
          password: [
              { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          code: [
              { required: true, message: '请输入验证码', trigger: 'blur' }
          ],
          password1: [
              { required: true, validator:validatePass, trigger: 'blur' },
          ],
      },
      show:true,
      count:"",
      countMes:"",
      timer:null,
      muluList1:[
        {videoName:'大大时代大时代'},
        {videoName:'大大时代大时代'},
        {videoName:'大大时代大时代'},
      ],
    }
  },
  computed:{

  },
  // head() {
  //   return {
  //     title: '个人资料',
  //     meta: [
  //       {
  //         hid: 'description',
  //         name: 'description',
  //         ccontent: '网校，黄山网校，在线学习，在线教育'
  //       },
  //       {
  //         hid: 'keywords',
  //         name: 'keywords',
  //         content: '网校，黄山网校，在线学习，在线教育'
  //       },
  //     ]
  //   }
  // },
  created(){
    //this.getData();
  },
  mounted(){
    
  },
  methods:{
    handleClick(){

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(2)
          this.submit();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    pageChange(){

    },
    submit(){
      let that = this;
            if(this.ruleForm.phone==""){
                Notification.warning({
                  title:'提示',
                  message:"请输入手机号"
                });
                return;
            }
            else if(!(/^1[3456789]\d{9}$/.test(this.ruleForm.phone))){
                Notification.warning({
                  title:'提示',
                  message:"请输入正确的手机号"
                });
                return;
            }
            else if(this.ruleForm.code==""){
                Notification.warning({
                  title:'提示',
                  message:"请输入验证码"
                });
                return;
            }
            else if(this.ruleForm.password==""){
                Notification.warning({
                  title:'提示',
                  message:"请输入密码"
                });
                return;
            }
            else if(this.ruleForm.password1==""){
                Notification.warning({
                  title:'提示',
                  message:"请确认密码"
                });
                return;
            }
            else if(this.ruleForm.password1!=this.ruleForm.password){
                Notification.warning({
                  title:'提示',
                  message:"两次密码不一致"
                });
                return;
            }
            this.$axios.$get('/f/userResetPassword?mobile='+this.ruleForm.phone+"&mobileCode="+this.ruleForm.code+"&password="+this.ruleForm.password+"&newPassword="+this.ruleForm.password1)
            .then(function (response) {
              Notification.success({
                title:'提示',
                message:"密码已修改"
              })
              that.$router.back(-1)
            })
            .catch(function (error) {
              console.log(error);
            })
    },
    getCode(){
      var that = this;
          if(this.ruleForm.phone==""){
            Notification.warning({
              title:'提示',
              message:"请输入手机号"
            })
          }
          else if(!(/^1[3456789]\d{9}$/.test(this.ruleForm.phone))){
            Notification.warning({
              title:'提示',
              message:"请输入正确的手机号"
            })
          }
          else{
            this.$axios.$get('/f/getMobileValidate?mobile='+this.ruleForm.phone+"&templateId=ZHMM_MOULD_ID")
            .then(function (response) {
              Notification.success({
                title:'提示',
                message:"短信已发送"
              })
              let TIME_COUNT = 60;
              that.countMes = "60S"
              if (!that.timer) {
                 console.log(666)
                 that.count = TIME_COUNT;
                 that.show = false;
                 that.timer = setInterval(() => {
                 if (that.count > 0 && that.count <= TIME_COUNT) {
                   that.count--;
                   var countMes = that.count+"S";
                   that.countMes = countMes;
                  } else {
                   that.show = true;
                   clearInterval(that.timer);
                   that.timer = null;
                  }
                 }, 1000)
              }
            })
            .catch(function (error) {
              console.log(error);
            })
          }
      
    },
    getData(){
      let that = this;
      this.$axios.$post("http://www.jzcqedu.com:8080/f/user/user_detail")
      .then(function (response) {
          let data = response.data;
          data.address = data.area1+data.area2+data.area3+data.area4+data.area5;
          if(data.sex=="1"){
            data.sex = "男"
          }
          else{
            data.sex = "女"
          }
          that.content = data;
      })
      .catch(function (error) {
          // handle error
          console.log(error);
      })
    },
  }
}
</script>
<style lang="less" >
    .modifyPassword{
      width:100%;
      height:100%;
      overflow-y:auto;
      .main-title1{
        line-height:20px;
        padding-left:10px;
        margin-left:40px;
        border-left:4px solid #17a2b8;
        font-size:16px;
        color:#17a2b8;
        font-weight:500;
        width:90%;
        margin-top:20px;
      }
      .myCenter-main{
        width:100%;
        padding:0 20px;
        box-sizing:border-box;
        .data-main{
            padding: 0 45px;
            margin-top:60px;
            .back-box{
                    width:420px;
                    height:340px;
                    margin-top:50px;
                    .back-button{
                        width:calc(100% - 100px);
                        border-radius:5px;
                        height:50px;
                        margin-left:100px;
                        background:#17a2b8;
                        color:#ffffff;
                        line-height:50px;
                        font-size:16px;
                        margin-top:40px;
                        text-align:center;
                        cursor:pointer;
                    }
                    .demo-ruleForm{
                        .el-input__inner{
                            border-radius:0;
                        }
                        .code-input{
                            width:220px;
                            float:left;
                        }
                        .getCode{
                            float:right;
                            width:90px;
                            height:40px;
                            border-radius:3px;
                            background:#17a2b8;
                            color:#ffffff;
                            font-size:14px;
                            float:right;
                            text-align:center;
                            cursor:pointer;
                        }
                    }
                }
        }
      }
    }
</style>



